*{  box-sizing: border-box;
 padding: 0;
 margin: 0;
 outline:none;
 outline-style: none;
 border-style: none;
 font-family:"Apple LiGothic Medium ";
}
body{
 padding-bottom: 50px;
}
#container{
 /*background:#eee;*/
 /*border: 1px solid blue;*/
 position: relative;
 width: 1000px;
 margin: 0 auto;
 min-height: 800px;
 padding-top: 10px;
 margin-top: 20px;

}


#tool{
   min-width: 1000px;
 width:100%;
 height: 150px;
 background: rgb(230,230,230,1);
 line-height: 50px;
 text-align: center;
 margin-bottom:20px;
 font-size: 1em;

 


}
#tool .index{
 position: relative;
 display:block;
 width:100px;
 height:100%;
 background: blue;
 /* margin-right: 10px;*/
 line-height:70px;
 margin-left: 10px;
 font-size: 36px;
 font-weight: bolder;
 float: left;
 z-index: 5;

}
.index a{
  color: #fff;
  text-decoration: none;
}
#tool .index a:nth-child(1){
 display:block;
    background:red;
    line-height:50px;
 
}
/*#tool a{
 display: inline-block;
 height:50px;
 width:60px ;
 font-size: 20px;
 font-weight: bolder;
 text-decoration: none;
 color: rgb(255, 0, 0,0.5);
}*/
#tool .index:active{
 color: #ccc;
 text-decoration: none;
}
#tool .index:hover{
 color:#ccc;
 text-decoration: none;
}
#tool #addClass{
 display:block;
 /*width:600ppx ;*/
 float: left;
 /*background: #fff;*/
}
#tool #addClass button{
 display: block;
 width: 175px;
 height:80px;
 line-height:100%;
 font-size: 50px;
 white-space: nowrap;
 overflow: hidden;
 text-overflow:ellipsis;
 /*border: 1px solid red;*/
 vertical-align: middle;
 /*margin-top:15px;*/
 background: rgb(230,230,230,1) ;
 color:rgb(70,70,70,1);
 font-weight: 400;
 float: left;
}

#tool #addClass button:hover{
 cursor: pointer;
 color: blue;
 text-decoration: underline;
}
#tool #more{
 display: block;
 /*vertical-align: top;*/
 /*margin-top:10px;*/
 width:175px;
 height: 50px;
    float: left;
 font-style: italic;
 font-size: 50px;
 line-height:70px;
 color:blue;
 border-top: 5px solid orange;
 /*border: 1px solid red;*/

}
#tool #more:hover{
 cursor: pointer;
 color: blue;
}
#tool #searchBox{

 display: block;
 box-sizing: border-box;
 font-size: 36px;
 /*width:550px ;*/
    border: 1px solid #ccc;
    height: 60px;
 padding-top:5px;
 float: left;
 /*margin-left: 100px;*/
 /*background: red;*/
 border-top: 5px solid orange;
}
#tool #searchBox input{
 /*border: 1px dashed rgb(100, 100, 100,0.7);*/
 display: block;
 border-radius:5px 0  0 5px;
 font-size:40px;
 width: 425px;
 height:50px;
 
 float: left;
 text-align: center;
 color: blue;
}
#tool #searchBox button{
 border-radius:0 5px  5px 0;
 border-left:none ;
 width:100px;
 height: 35px;
 display: block;
 margin-top: 0;
 float: left;
 font-size: 50px;


}
#toEnter{
 width: 185px;
 font-size: 50px;
 display: block;
 float: left;
 line-height: 70px;
 border-top: 5px solid orange;
}
#deleCls{
 margin-left: 10px;
 color: #ccc;
 background: rgb(230,230,230,1);
}
#deleCls:hover{
 color: red;
}

#tool #span,button:active{
 color: #ccc;
}


#cls{
 width: 100%;
 min-height: 100px;
 background:rgb(230, 230, 230);
 border: 1px dashed black;
 padding-bottom:15px;
 padding-left: 10px;
 border-radius: 10px;
 display: none;
}
#cls .moreCls{
 display: inline-block;
 border-radius: 5px;
 border: 1px dashed rgb(0, 0, 0,0.4);
 text-align: center;
 width:190px;
 height:60px;
 line-height: 50px;
 font-size: 30px;
 margin-top:15px;
 margin-left:5px;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 padding-left: 10px;
 font-style: italic;
}
#cls .moreCls:hover{
 cursor: pointer;
 color: blue;
 border: 1px dashed rgb(255, 0, 0,0.4);
 text-decoration: underline;
}

#show{
 //padding-top: 20px;
 margin-bottom: 50px;
}
#show .showArea{

 margin-bottom: 50px;
 /* background: red;*/
 /*border: 1px solid blue;*/
 min-height:100px ;
}
#show .showArea .showAreaCls{
 width: 100%;
 height:50px;
 font-size:30px;
 line-height: 50px;
 padding-left: 25px;
 /*font-weight:5;*/
 /*border-bottom: 1px dashed  blue;*/
 /*border-top: 1px  dashed blue;*/
 /*font-weight: bolder;*/
 background: rgb(200,200,200,0.5);
 font-style: italic;

}

#show .showArea .showAreaCls span{
 display: inline-block;
 min-width:60px ;
 margin-bottom:-10px ;
 /*background: blue;*/
 color: blue;
 font-weight: 900;
 text-align: center;
 cursor: pointer;
  
    /*background: red;*/

}
#show .showArea .showAreaTitle{
 /*background: #ccc;*/
 display: inline-block;
 width:100%;
 height:50px;
 font-size: 30px;
 line-height: 50px;
 padding-left: 60px;
 border-bottom: 1px dashed blue;
 color:rgb(100,100,100,0.9);
 font-style: italic;
   overflow: hidden; /* 确保超出容器的内容被裁剪 */
    white-space: nowrap; /* 确保文本在一行内显示 */
    text-overflow: ellipsis; /* 超出部分显示省略号 */
}
#show .showArea .showAreaTitle a:hover{
 cursor: pointer;
 color: blue;
 text-decoration: underline;
}

#show p{

    display: inline-block;
    width: 100%;
    height: 50px;
    font-size: 50px;
    line-height: 50px;
    padding-left:60px;
    border-bottom: 1px dashed blue;
    color: rgb(100,100,100,0.9);
    font-style:italic;
    overflow: hidden; /* 确保超出容器的内容被裁剪 */
  white-space: nowrap; /* 确保文本在一行内显示 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
}

#show p:nth-child(1){
    
    padding-left:25px;
    margin-top:20px;

}

.showCls{
 width: 100%;
 background: rgb(230, 230, 230,1);
    height: 50px;
    font-weight: 200;
    font-style: italic;
    margin-top:50px;
    
}

.showCls span{
 display: inline-block;
 min-width: 60px;
    margin-bottom: -10px;
    color: blue;
    font-weight: 900;
    font-size: 50px;
    text-align: center;
    line-height: 50px;
    
   
   

}
#show .showTitle
{
   height: 100px;
   line-height: 100px;
   color:blue;
}

#show .showTitle a
{
   height: 100px;
   line-height: 100px;
   color:blue;
}
footer{
 /*padding-top:50px ;*/
 width: 100%;
 text-align: center;
 font-size: 13px;
 line-height:35px;
 margin-top: 100px;
}
